<template>
    <div class="header">
        <span @click="flag = !flag">{{token}}</span>
            <ul class="ul" v-if="flag">
                <li v-for="(item,index) in rolesList" :key="index" @click="roles(item.type)">{{item.name}}</li>
                <li @click="loginout">退出登录</li>

            </ul>
    </div>
</template>
<script>
import axios from 'axios'
import {reactive,ref,toRefs} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
export default {
    setup(props) {
        const {push} = useRouter()
        const {commit} = useStore()
        const data = reactive({
            rolesList:[],//存放角色数据
            flag:false,
        })
        const token = localStorage.getItem('token')
        axios.get('roles.json').then(res=>{
            console.log(res);
            data.rolesList = res.data
        })
        const roles=(type)=>{
            commit('roles',type)
        }
        const loginout=()=>{
            localStorage.removeItem('token')
            push('/login')
            

        }
        
        return {token,...toRefs(data),roles,loginout}
        
    }
}
</script>
<style lang="scss" scoped>
.header{
    height: 60px;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color:#fff;
    padding:0 30px;
    position: relative;
    .ul{
        position: absolute;
        width:150px;
        height:200px;
        background: #ccc;
        right:30px;
        top:60px;
        li{
            line-height: 40px;
            text-align:center;
        }
    }

}
</style>

